<template>
	<div class="cloneContainer">
		<div class="header">
			<a-input v-model:value="searchData['search_AND_LIKE_student.name']" autocomplete="off" placeholder="请输入学生姓名" style="flex: 1;margin-right: 12px" />
			<a-input v-model:value="searchData['search_AND_LIKE_project.name']" autocomplete="off" placeholder="请输入项目名称" style="flex: 1; margin-right: 12px" />

			<minDatePicker v-model:value="searchData['search_AND_EQ_student.classStudents.gradeClass.grade.year']" picker="year" placeholder="年级"
				style="margin-right: 12px; flex: 1;" @handleChange="handleChange" />
			<a-select v-model:value="searchData['search_AND_EQ_student.classStudents.gradeClass.id']" style="flex: 1; margin-right: 12px"
				placeholder="班级">
				<a-select-option :value="item.id" v-for="item in classStructure">{{ item.name
					}}</a-select-option>
			</a-select>
			<div>
				<a-button type="primary" @click="(tableData=[]) & show()">查询</a-button>
				<a-button style="margin-left: 10px" @click="(searchData = {}) & show()">重置</a-button>
			</div>
		</div>
		<div class="header" style="margin-top: 20px;">
			<div style="display: flex;">
				<div @click="activeName = '已加入'" :class="['item', activeName == '已加入' && 'activeItem']">已加入 <a-badge :count="conutGroup.count2 || 0" :number-style="{ backgroundColor: '#52c41a' }"/></div>
				<div @click="activeName = '待审核'" :class="['item', activeName == '待审核' && 'activeItem']">待审核 <a-badge :count="conutGroup.count1 || 0" /></div>
			</div>
			<div>
				<!-- <a-button style="margin-left: 10px" @click="handleExport">导出表格</a-button> -->
			</div>
		</div>

		<div class="content">
			<div style="flex:1;min-height: 0;overflow: auto;">
				<!-- :row-selection="{
						checkStrictly: false,
						selectedRowKeys: selectedRowKeys,
						onChange: onSelectChange,
					}" -->
				<a-table
					:key="activeName"
					
					:dataSource="tableData" :columns="columns" :pagination="false">
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.dataIndex === 'projectName'">
							<a-tooltip placement="topLeft">
								<template #title>
									<span>{{ text }}</span>
								</template>
								<span style="display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
									{{ text }}
								</span>
							</a-tooltip>
						</template>
						<template v-if="column.key === 'operate'">
							<div style="font-size: 20px;">
								<CheckCircleOutlined style="margin-right: 10px;" @click="handleClick({ name: '加入', record, index })" />
								<a-popconfirm placement="topRight" :title="`确认拒绝${record.studentName}加入${record.projectName}项目吗？`" @confirm="handleClick({ name: '拒绝', record, index })">
									<CloseCircleOutlined />
								</a-popconfirm>
							</div>
						</template>
					</template>
				</a-table>
			</div>
			<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
		</div>

		<a-modal v-model:open="modal.visible" :footer="null">
			<a-form ref="formRef" v-bind="{ layout: 'vertical' }" :model="formModel" :rules="rules">
				<a-form-item has-feedback label="项目名称" name="name">
					<a-input v-model:value="formModel.name" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback label="dify链接" name="name">
					<a-input v-model:value="formModel.name" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback label="课程" name="mainTeacherId">
					<a-select v-model:value="formModel.mainTeacherId" :options="teacherStructure" placeholder="请选择"
						style="width:100%" :field-names="{ label: 'name', value: 'id' }"></a-select>
				</a-form-item>
				<a-form-item has-feedback label="排序" name="describe">
					<a-input-number v-model:value="formModel.describe" style="width: 100%;" />
				</a-form-item>
				<a-form-item has-feedback label="归属教师" name="mainTeacherId">
					<a-select v-model:value="formModel.mainTeacherId" :options="teacherStructure" placeholder="请选择"
						style="width:100%" :field-names="{ label: 'name', value: 'id' }"></a-select>
				</a-form-item>
				<a-form-item v-if="!modal.formDisable" style="text-align: center;padding-top: 20px;">
					<a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
					<a-button style="margin-left: 20px" @click="modal.visible = false">取消</a-button>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import minDatePicker from '@/components/common/minDatePicker.vue'
import { teacherProjectTeamApproved, teacherProjectTeamRejected, teacherProjectTeamMyStudentList, teacherGradeClassFindAll, teacherProjectTeamMyStudentCount } from '@/request/teacher/student'
import { message, Modal } from 'ant-design-vue'
const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const formModel = ref({})
const formRef = ref()
const modal = reactive({ visible: false, formDisable: false, name: '' })
const rules = {
	name: [
		{ required: true, message: '请输入', trigger: 'change', },
	],
}
const originColumns = [
	{
		title: '序号',
		dataIndex: 'index',
		customRender: (record) => record.index + 1,
	},
	{ title: '学生姓名', dataIndex: 'studentName', key: 'studentName' },
	{ title: '学号', dataIndex: 'studentNum', key: 'studentNum' },
	{ title: '年级', dataIndex: 'year', key: 'year' },
	{ title: '班级', dataIndex: 'className', key: 'className' },
	{ title: '项目名称', dataIndex: 'projectName', key: 'projectName'},
	{ title: '组别', dataIndex: 'teamName', key: 'teamName' },
	{ title: '岗位名称', dataIndex: 'projectJobName', key: 'projectJobName' },
	// { title: '操作', dataIndex: 'operate', key: 'operate' },
]
const columns = ref([...originColumns])
const tableData = ref([])
const activeName = ref('已加入')
const conutGroup = ref({})
const show = async () => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value
	}
	console.log(req,'req')
	if (activeName.value == '已加入') req['search_AND_GT_auditStatus'] = 0
	if (activeName.value == '待审核') req['search_AND_EQ_auditStatus'] = 0
	// let res = await teacherProjectTeamMyStudentList(req)
	let res = {
		列表: await teacherProjectTeamMyStudentList(req),
    计数: await teacherProjectTeamMyStudentCount()
  }
	console.log(res)

	if (res['列表']) {
		tableData.value = res['列表'].data.content
		pagination.value = {
			...pagination.value,
			...res['列表'].data.page
		}
	}
	if (res['计数']) {
		conutGroup.value = res['计数'].data
	}
	
}
show()
watch(activeName, () => {
	tableData.value = []
	if (activeName.value == '已加入') columns.value = [...originColumns]
	if (activeName.value == '待审核') columns.value = [...originColumns, { title: '操作', dataIndex: 'operate', key: 'operate', width: 100 }]
	show()
})
const classStructure = ref([])
const handleChange = async (val) => {
	console.log(val)
	if (!val) return classStructure.value = []
	let res = await teacherGradeClassFindAll({'search_AND_EQ_grade.year': val})
	console.log(res, '?')
	if (!res) return classStructure.value = []
	classStructure.value = res.data
}
const selectedRowKeys = ref([])
const onSelectChange = keys => selectedRowKeys.value = keys

const handleClick = async ({ name, record }) => {
	let req = {
		...record
	}, res = null, operate = null
	switch (name) {
		case '加入':
			res = await teacherProjectTeamApproved(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
		case '拒绝':
			operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: '请及时通知学生重新选取项目',
					onOk() {
						resolve(true);
					},
					confirmText: '确定',
					cancelText: '取消',
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
			res = await teacherProjectTeamRejected(req)
			if (!res) return
			message.success('操作成功')
			show()
			break
	}
}
const handleExport = async () => {
	if (!selectedRowKeys.value.length) return message.info('请选择')
}


</script>

<style lang="scss" scoped>
$mainColor: #a84e91;

.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 10px;
		height: 80px;
		padding: 20px;
		.item {
			cursor: pointer;
			margin-right: 15px;
			padding: 5px 10px;
			border: 1px solid transparent;
		}
		.activeItem {
			border-radius: 10px;
			/* border: 1px solid $mainColor; */
			box-shadow: $generalBoxShadow;
		}
	}

	.content {
		margin-top: 20px;
		padding: 20px;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
		
	}
}
</style>